<template>
  <div id="root">
    <div class="top3">
      <div class="img"></div>
      <div class="top31">您没有商品订单</div>
    </div>
    <div class="tuijian">推荐搭配</div>
    <div class="goods">
      <div class="main" v-for="(item, index) in list" :key="index">
        <div class="img"><img :src="item.src" alt="" /></div>
        <div class="title">{{ item.title }}</div>
        <div class="price">{{ item.price }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.$http({
      url: "http://localhost:3000/goods",
      method: "get",
    }).then((res) => {
      this.list = res.data;
    });
  },
};
</script>

<style scoped>
.top3 {
  width: 7.1875rem;
  height: 10.1875rem;
  margin: 0 auto;
}
.img {
  background: url(https://hshop.honorfile.com/nwap/221030101/images/echannelWap/icon/emtpy-order.png)
    no-repeat center;
  background-size: 4.9875rem 4.9875rem;
  width: 5.1875rem;
  height: 5.1875rem;
  margin-top: 3rem;
  margin-left: 1rem;
}
.top31 {
  color: darkgrey;
  margin-top: 0.525rem;
}
.tuijian {
  margin: 1rem;
  font-weight: 700;
  font-size: 1rem;
}
.goods {
  display: flex;
  flex-wrap: wrap;
}
.main {
  width: 10.375rem;
  height: 15.625rem;
  border-radius: 0.625rem;
  background-color: white;
  overflow: hidden;
  margin: 0.6475rem;
}
.img {
  width: 7.75rem;
  height: 7.75rem;
  margin: 1.25rem;
}
img {
  width: 7.75rem;
  height: 7.75rem;
}
.title {
  font-size: 0.875rem;
  margin: 0 auto;
}
.price {
  font-size: 0.875rem;
  font-weight: 700;
  margin-top: 1.5625rem;
  margin-left: 0.3125rem;
}
</style>